<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import Directory from "@/views/BookInformation/components/directory.vue";
import Comment from "@/views/BookInformation/components/comment2.vue";
import RankingList from "@/components/rankingList.vue";
import { getBookInformation } from '@/apis/bookInformation'
import { useRouter,useRoute } from 'vue-router'
import {getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const activeName = ref('first')
const bookInfo = ref({});
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const isCeiling = ref('')
const emit = defineEmits(['updateCeiling'])
const getIsCeiling = (value) => {
  isCeiling.value = value
  emit('updateCeiling', isCeiling.value)
}
const id =ref()
const getBookInfo = async () => {
  id.value = route.params.id
  bookInfo.value = await getBookInformation(id.value,proxy) 
  console.log(bookInfo.value)
}
onMounted(() => {
  getBookInfo()
})
</script>

<template>
  <div class="content">
    <div class="labelPage">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="作品信息" name="first" class="information">
          <pre class="content-pre">{{ bookInfo.description }}</pre>
        </el-tab-pane>
        <el-tab-pane label="目录" name="second">
          <directory></directory>
        </el-tab-pane>
        <el-tab-pane label="评论" name="third">
          <comment></comment>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="rankList">
      <ranking-list></ranking-list>
    </div>
  </div>
</template>

<style scoped>
.demo-tabs {
  margin: 20px;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 20px;
  font-weight: 600;
  height: auto;
}

.content {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-items: center;
  margin: 20px;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

.labelPage {
  width: 950px;
  background-color: white;
  margin: 20px;
  height: max-content;
}

.rankList {
  width: auto;
  background-color: white;
  margin: 20px;
  margin-left: 170px;
  height: 700px;
  overflow: hidden;
}

.information {
  margin: 20px;
  font-size: 20px;
}

.content-pre {
  white-space: pre-wrap;
  /* 保留空格和换行符，并自动换行 */
  font-family: inherit;
  /* 继承父元素的字体 */
  word-break: break-word;
  /* 在必要时对长词进行断行 */
}
</style>
